<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function query(){
            /**
             * 1.根据id获取，返回单个对象
             */
            // var d1 = document.getElementById("d1")
            // console.log(typeof d1); // DOM对象，代表页面中对应的元素
            // console.log(d1);

            /**
             * 2.根据name获取，返回集合
             */
            // var objs = document.getElementsByName("hobby")
            // // console.log(objs);

            /**
             * 3.根据标签名获取，返回集合
             */
            // var objs = document.getElementsByTagName('p')

            /**
             * 4.根据类名获取，返回集合
             */
            // var objs = document.getElementsByClassName("aaa")

            /**
             * 5.根据css选择器来获取，返回单个对象
             */
            // var obj = document.querySelector('#d1')
            // var obj = document.querySelector('p.aaa')
            // console.log(obj);

            /**
             * 6.根据css选择来获取，返回多个对象
             */
            // var objs = document.querySelectorAll('.aaa')
            //
            // for (var obj of objs){
            //     console.log(obj);
            // }


            let obj = document.getElementById('second');
            // console.log(obj.parentNode);
            // console.log(obj.previousElementSibling);
            // console.log(obj.nextElementSibling);
            // console.log(obj.parentNode.firstElementChild);
            // console.log(obj.parentNode.lastElementChild);
            console.log(obj.parentNode.firstChild);
        }
    </script>
</head>
<body>
    <button onclick="query()">获取页面中的元素</button>

    <div id="d1" class="aaa">hello</div>
    <div id="d2" class="aaa">world</div>
    <p class="aaa">welcome</p>
    <p>happy</p>
    爱好：<input type="checkbox" name="hobby" value="eat">吃饭
        <input type="checkbox" name="hobby" value="sleep">睡觉
        <input type="checkbox" name="hobby" value="doudou">打豆豆

    <ul>
        <li>aa</li>
        <li id="second">bb</li>
        <li>cc</li>
        <li>dd</li>
    </ul>
</body>
</html>